<template>
  <div style="display: inline-block;">
    <el-button type="warning" icon="el-icon-tickets" circle title="资料详情" @click="getLists"/>
    <el-dialog :visible.sync="dialogTableVisible" title="资料详情" style="width:100%; margin-right:300px;">
      <div v-loading="listLoading">
        <el-card shadow="never">
          <div style="float: left;margin-bottom: 10px;font-size: 16px" class="clearfix">
            <strong><span>用户信息</span></strong>
          </div>
          <el-table :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%;">
            <el-table-column align="center" label="姓名">
              <template slot-scope="scope">
                <span>{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="证件类型">
              <template slot-scope="scope">
                <span>{{ scope.row.IDType }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="证件号码">
              <template slot-scope="scope">
                <span>{{ scope.row.IDNumber }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <el-card shadow="never">
          <div style="float: left;margin-bottom: 10px;font-size: 16px" class="clearfix">
            <strong><span>公司信息</span></strong>
          </div>
          <el-table :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%;">
            <el-table-column align="center" label="公司名称" prop="公司名称">
              <template slot-scope="scope">
                <span>{{ scope.row.companyName }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="营业执照" prop="营业执照">
              <template slot-scope="scope">
                <!--<img v-if="scope.row.businessLicense != null" :src="scope.row.businessLicense" style="width: 70px;height: 70px;cursor:pointer; border-radius:40px;">-->
                <!--<span>{{ scope.row.img }}</span>-->
                <img
                  :src="scope.row.businessLicense"
                  style="width: 80px;height: 80px;border: 0;border-radius: 40px"
                  @click="bigImg(scope.row.id)">
                <transition name="el-zoom-in-top">
                  <div v-show="scope.row.id === listItemId" class="bigImg" @click="bigImg">
                    <img :src="scope.row.businessLicense">
                  </div>
                </transition>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
      <!--<div class="filter-container">-->
      <!--&lt;!&ndash;<addPage @getLists="getLists"/>&ndash;&gt;-->
      <!--</div>-->
      <!--<el-table v-loading="listLoading" :key="tableKey" :data="list" border fit highlight-current-row height="100" style="width: 100%;">-->
      <!--<el-table-column v-if="formThead.id" align="center" label="id">-->
      <!--<template slot-scope="scope">-->
      <!--<span>{{ scope.row.id }}</span>-->
      <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column v-if="formThead.name" align="center" label="姓名">-->
      <!--<template slot-scope="scope">-->
      <!--<span>{{ scope.row.name }}</span>-->
      <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column v-if="formThead.IDType" align="center" label="证件类型">-->
      <!--<template slot-scope="scope">-->
      <!--<span>{{ scope.row.IDType }}</span>-->
      <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column v-if="formThead.IDNumber" align="center" label="证件号码">-->
      <!--<template slot-scope="scope">-->
      <!--<span>{{ scope.row.IDNumber }}</span>-->
      <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column v-if="formThead.companyName" align="center" label="公司名称">-->
      <!--<template slot-scope="scope">-->
      <!--<span>{{ scope.row.companyName }}</span>-->
      <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column v-if="formThead.businessLicense" align="center" label="营业执照">-->
      <!--<template slot-scope="scope">-->
      <!--<span>{{ scope.row.businessLicense }}</span>-->
      <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column v-if="formThead.merchantID" align="center" label="商家ID">-->
      <!--<template slot-scope="scope">-->
      <!--<span>{{ scope.row.merchantID }}</span>-->
      <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column align="center" fixed="right" label="操作" class-name="small-padding fixed-width">-->
      <!--<template slot-scope="scope">-->
      <!--<editPage :row_data="scope.row" @getLists="getLists"/>-->
      <!--<el-button type="danger" icon="el-icon-delete" circle title="删除" @click="del(scope.row.id)"/>-->
      <!--</template>-->
      <!--</el-table-column>-->
      <!--</el-table>-->
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
import { getAuditList } from '@/api/merchant/merchant_audit_data'
import store from '@/store'
import waves from '@/directive/waves' // 水波纹指令
// import addPage from '@/merchant/details_addPage'
// import editPage from '@/merchant/details_editPage'
export default {
  name: 'DragDialogDemo',
  directives: { elDragDialog, waves },
  components: { },
  props: {
    row_data: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function() {
        return null
      }
    }
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      listItemId: null,
      dialogTableVisible: false,
      listQuery: {
        id: undefined,
        name: undefined,
        IDType: undefined,
        IDNumber: undefined,
        companyName: undefined,
        businessLicense: undefined,
        merchantID: undefined,
        page: 1,
        limit: 20
      },
      formThead: {
        id: true,
        name: true,
        IDType: true,
        IDNumber: true,
        companyName: true,
        businessLicense: true,
        merchantID: true
      }
    }
  },
  methods: {
    bigImg(id) {
      if (id > 0) {
        this.listItemId = id
      } else {
        this.listItemId = null
      }
    },
    // submitForm() {
    //   add(store.getters.token, this.row_data).then(res => {
    //     this.$emit('getLists')
    //     this.close()
    //   })
    // },
    close() {
      this.dialogTableVisible = false
    },
    getLists() {
      this.dialogTableVisible = true
      this.listLoading = true
      const id = this.row_data.id
      getAuditList(store.getters.token, { id: id }).then(response => {
        this.list = response.data.list.data
        this.listLoading = false
      })
    }
  }
}
</script>
<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand.el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 75%;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .bigImg{
    min-width:100%;
    min-height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:999999;
    background:rgba(0,0,0,.5);
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    /*transition:1s;*/
  }
  .bigImg img{
    max-width: 600px;
    min-width: 150px;
    height:auto;
    border-radius:10px;
  }
</style>

